<template>
	<div class="swiper" v-if="data.length > 0">
	    <van-swipe :autoplay="3000">
			<van-swipe-item v-for="(item, index) in data" :key="index">
			    <img v-lazy="item[imgKey]" class="full-width img-bg" alt="1" v-if="item[imgKey]"/>
			    <img v-lazy="item" class="full-width img-bg" alt="2" v-else/>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';
import Vue from "vue";
Vue.use(Lazyload);
	export default {
		name:'Swiper',
		components: {
			Swipe,
    		SwipeItem,
		},
		data()
		{
			return {
				images: [
			        require('../assets/banner.png'),
			        require('../assets/banner.png')
			    ]
			}
		},
		props: {
			data: {
				type: Array,
				required: true,
			},
			imgKey: {
				type: String,
				// default: 'pic'
			},
			options: {
				type: Object,
				default ()
				{
					return {
							
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.swiper{
		img{
			object-fit: cover;
		}
	}
</style>





















